<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <label for="">省：</label>
    <select id="province">
        <option value="">请选择</option>
    </select>

    <label for="">市：</label>
    <select id="city">
        <option value="">请选择</option>
    </select>

    <label for="">区：</label>
    <select id="town">
        <option value="">请选择</option>
    </select>


    <script id="temp" type="text/html">
        {{each result}}
        <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="js/template.js"></script>
    <script>
        const city = {
            init() {
                this.initEvent();
                this.renderList()
            },
            initEvent() {
                console.log(this) //-->city对象
                $("#province").on("change", this.proChange.bind(this)) //this
            },
            ajax(type, id) {
                $.ajax({
                    type: "get",
                    url: `http://api.jisuapi.com/area/${type}?appkey=4b775b74c1af75ba`,
                    data: {
                        parentid: id || null
                    },
                    dataType: "jsonp",
                    success: function(res) {
                        console.log(res)
                        let html = template("temp", res);
                        $(`#${type}`).html(html)
                    }
                });
            },
            renderList() {
                this.ajax("province");
            },
            proChange(e) {
                console.log(this) //事件触发元素 通过bind this指向发生改变 city这个对象
                let id = e.target.value;
                this.ajax("city", id);
            }

        }

        city.init()
    </script>
</body>

</html>